<template>
    <div>
        <game-header></game-header>
        <div class="main-container">
            <div class="filter">

                <div class="filter-item" :class="{active:sortActive===item.index}" v-for="(item,index) in sortFilters"
                     :key="item.index"
                     @click="sort(item,item.index)"
                >
                    {{item.name}}
                    <template v-if="sortActive === item.index">
                        <i class="el-icon-caret-top text-info" v-show="!item.state"></i>
                        <i class="el-icon-caret-bottom text-info" v-show="item.state"></i>
                    </template>
                </div>

                <div class="filter-item">
                    <i class="el-icon-s-operation m-r-xs text-md text-info"></i>

                    当前类目：
                    <span v-if="(searchForm.xiao_fenlei && searchForm.da_fenlei) || searchForm.xiao_fenlei">
                        {{getSubName(+searchForm.xiao_fenlei)}}
                    </span>
                    <span v-else>
                        {{getBrandName(+searchForm.da_fenlei)}}
                    </span>
                </div>
                <div class="filter-item" @click="showTaskList = true" >
                    <i class="el-icon-s-order text-info"></i> 最新任务：
                    <template v-if="taskList.length">
                        <span class="text-info">{{taskList[0].renwu_mingcheng}}获得 </span>
                        <span class="text-danger text-lg">{{(taskList[0].renwu_jiangli /100).toFixed(2)}}</span>
                        <span class="text-info"> 元</span>
                    </template>

                </div>
            </div>
            <div class="text-center padder-v font-bold m-t-xxl" v-if="list.length<1">
                暂无相关内容
            </div>
            <template v-else>
                <game-list v-loading="searchLoading" :isSearch="true" :list='list' class="m-t-md"></game-list>
                <pagination :total="0" :options="searchForm" @change="search"></pagination>
            </template>

        </div>
        <el-dialog
                :visible.sync="showTaskList"
                width="50%"
        >
            <div class="dialog-body">
                <div class="title">新手任务</div>
                <el-table
                        v-loading="loading"
                        :data="taskList"
                        style="width: 100%">
                    <el-table-column
                            prop="renwu_mingcheng"
                            label="任务名称"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="renwu_xiangqing"
                            label="任务详情"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="renwu_jiangli"
                            label="任务奖励（元）">
                        <template v-slot="scope">
                            {{(scope.row.renwu_jiangli / 100).toFixed(2)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="renwu_dabiao"
                            label="当前进度（元）">
                        <template v-slot="scope">


                            {{(total / 100).toFixed(2)}} / {{(scope.row.renwu_dabiao /100).toFixed(2)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="操作">
                        <template v-slot="scope">
                            <template v-if="scope.row.renwu_dabiao <= total">
                                <el-link type="danger" v-if="!scope.row.wancheng_zhuangtai"
                                         @click="getReward(scope.row.Id)">
                                    领取奖励
                                </el-link>
                                <span class="text-success" v-else>
                                    已领取
                                </span>
                            </template>

                            <el-link type="primary" v-else @click="$router.push('/promotion')">前往邀请</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="title m-t-lg m-b">我的卡券</div>
                <el-table
                        v-loading="loading"
                        :data="ticket"
                        style="width: 100%">
                    <el-table-column
                            prop="jiangli_mingcheng"
                            label="卡券名称"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="jiangli_jine"
                            label="卡券金额（元）"
                    >
                        <template v-slot="scope">
                            {{(scope.row.jiangli_jine / 100).toFixed(2)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="jiangli_zhuangtai"
                            label="卡券状态">
                        <template v-slot="scope">

                            <span v-if="!scope.row.jiangli_zhuangtai" class="text-danger">未使用</span>
                            <span v-else class="text-success">已使用</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="create_time"
                            label="领取时间">
                    </el-table-column>
                    <el-table-column
                            prop="shiyong_time"
                            label="使用时间">

                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="showTaskList = false">取 消</el-button>
                <el-button type="primary" @click="showTaskList = false">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
    import mixins from '../mixin'

    export default {
        name: 'search',
        mixins: [mixins],
        data() {
            return {
                sortActive: 1,
                sortFilters: [
                    {name: '综合排序', state: true, count: 0, index: 1},
                    {name: '销量排序', state: true, count: 0, index: 3},
                    {name: '价格排序', state: true, count: 0, index: 5},
                ],
                showTaskList: false,
                taskList:[],
                ticket:[],
                tableData: [
                    {
                        date: '邀请好友领无门槛优惠券',
                        name: '好友返利达到2元',
                        address: '无门槛优惠券3元',
                        p: '3.58/2.00',
                    },
                    {
                        date: '邀请好友领无门槛优惠券',
                        name: '好友返利达到2元',
                        address: '无门槛优惠券3元',
                        p: '3.58/2.00',
                    },
                    {
                        date: '邀请好友领无门槛优惠券',
                        name: '好友返利达到2元',
                        address: '无门槛优惠券3元',
                        p: '3.58/2.00',
                    },
                ],
                searchLoading: false,
                searchForm: {
                    paiming: 1,
                    da_fenlei: '',
                    xiao_fenlei: '',
                    shangping_mingcheng: '',
                    page1: 1
                },
                list: [],

            }
        },
        computed: {},
        methods: {
            sort(item, index) {
                this.sortActive = index;
                let i;
                this.sortFilters.forEach((sItem) => {
                    if (index === sItem.index) {
                        if (sItem.count !== 0) {
                            sItem.state = !item.state;

                        }
                        sItem.count = 1;
                        i = sItem.state ? 0 : 1
                        this.searchForm.paiming = sItem.index + i

                    } else {
                        sItem.state = true;
                        sItem.count = 0
                    }
                });

                this.search()

            },
            search() {
                this.searchLoading = true;
                return new Promise(resolve => {
                    this.$axios.post(`/api/user/shangping_sousuo`, this.searchForm)
                        .then(res => {
                            if (res.code === `200`) {
                                this.list = res.data.shangping_data;

                            }
                        }).finally(() => {
                        this.searchLoading = false;
                        resolve()
                    })
                })
            },
            init() {
                let {id, subId, key} = this.$route.query
                this.searchForm.shangping_mingcheng = key;
                this.searchForm.da_fenlei = id;
                this.searchForm.xiao_fenlei = subId;

                this.search();
                this.getTask()
            },
            //获取任务列表
            getTask() {
                this.loading = true
                this.$axios.post(`/api/renwu/get_renwu`)
                    .then(res => {
                        this.loading = false
                        if (res.code == 200) {
                            this.taskList = res.data.renwu_xiangqing;
                            this.ticket = res.data.wode_quan;
                            this.total = res.data.muqian_jindu
                        }
                    })
            },
            //领取奖励
            getReward(renwu_id) {
                this.$axios.post(`/api/renwu/get_renwu_jiangli`, {renwu_id})
                    .then(res => {
                        if (res.code == 200) {
                            this.$message.success('领取成功');
                            this.getTask();
                        }
                    })
            }

        },
        watch: {
            $route(to, from) {
                this.init();
            },
        },

        async created() {
            this.init();
        },
    }
</script>

<style lang="less" scoped>
    @import '~@/assets/css/varibles.less';

    .filter {
        display: flex;
        border: 1px solid #eee;

        .filter-item {
            padding: 0 45px;
            height: 45px;
            line-height: 45px;
            border-right: 2px;
            user-select: none;
            border-right: 1px solid #eee;
            position: relative;

            &:not(:last-child) {
                cursor: pointer;

                &::before {
                    content: ' ';
                    position: absolute;
                    left: 0;
                    width: 100%;
                    height: 2px;
                    background-color: @primary-color;
                    opacity: 0;
                    transition: all .3s;
                }

                &.active {
                    &::before {
                        opacity: 1;
                    }
                }
            }

            &:last-child, &:nth-child(4) {
                flex: auto;

            }

            &:last-child {
                border: none;
            }

        }
    }

    .dialog-body {
        .title {
            font-size: 18px;
            border-left: 3px solid @primary-color;
            line-height: 1.2;
            padding-left: 3px;

        }
        height: 400px;
        overflow: scroll;
        /deep/ .el-dialog__header {
            display: none;
        }
    }
</style>
